Creating Web photo galleries

Optimizing Images for the Web > Creating Web photo galleries

You use the Web Photo Gallery command to automatically generate a Web photo gallery from a set of images. A Web photo gallery is a Web site that features a home page with thumbnail images and gallery pages with full-size images. Each page contains links that allow visitors to navigate the site. For example, when a visitor clicks a thumbnail image on the home page, a gallery page with the associated full-size image loads.

Photoshop Elements provides a variety of styles for your gallery, which you can select using the Web Photo Gallery command. If you are an advanced user who has knowledge of HTML, you can also customize a style by editing a set of HTML template files or create a new style.

To create a Web photo gallery:

1 Choose File > Automate > Web Photo Gallery.

2 Under Files, click Source. Then select the folder containing the images that you want to appear in the gallery, and click OK. Select Include All Subdirectories to include images inside any subfolders of the selected folder.

3 Click Destination. Then select the destination folder that you want to contain the images and HTML pages for the gallery, and click OK.

4 For Styles, choose a style for the gallery. A preview of the home page for the chosen style appears in the dialog box.

5 To set options for the banner that appears on each page in the gallery, choose Banner from the Options pop-up menu. Then do the following:

For Site Name, enter the title of the gallery.

For Photographer, enter the name of the person or organization that deserves credit for the photos in the gallery.

For Date, enter the date that you want to appear on each page of the gallery. By default, Photoshop Elements uses the current date.

For Font and Font Size, choose options for the banner text.

6 To set options for the gallery pages, choose Gallery Images from the Options pop-up menu. Then do the following:

For Border Size, enter the width of the border around the image in pixels.

To have Photoshop Elements resize the source images for placement on the gallery pages, select Resize Images. Then choose an option for the image size from the pop-up menu or enter a size in pixels. For JPEG Quality, choose an option from the pop-up menu, enter a value between 0 and 12, or drag the slider. A higher value results in better image quality but larger file size.

7 To set options for the home page, choose Gallery Thumbnails from the Options pop-up menu. Then do the following:

For Caption, select Use Filename to display the filename under each thumbnail.

Select Use File Info Caption to display caption text from the File Info dialog box under each thumbnail and on each gallery page.

For Font and Font Size, choose options for the thumbnail text.

For Size, choose an option for the thumbnail size from the pop-up menu or enter a value in pixels for the width of each thumbnail.

For Columns and Rows, enter the number of columns and rows that you want to be used to display the thumbnails on the home page. This option doesn't apply to galleries that use the Horizontal Frame Style or Vertical Frame Style.

For Border Size, enter the width of the border around each thumbnail in pixels.

8 To set options for colors of elements in the gallery, choose Customize Colors from the Options pop-up menu. To change the color of a particular element, click its color swatch, and then select a new color using the color picker. The Background option lets you change the background color of each page. The Banner option lets you change the background color of the banner.

9 Click OK to create the gallery.

Photoshop places the following HTML and JPEG files in your destination folder:

A home page for your gallery named index.htm. Open this file in any Web browser to preview your gallery.

JPEG images inside an images subfolder.

HTML pages inside a pages subfolder.

JPEG thumbnail images inside a thumbnails subfolder.

Optimizing Images for the Web > Creating Web photo galleries